<template>
  <v-container class="mt-0 pt-0 mb-15">
    <v-list two-line>
      <v-divider></v-divider>
      <v-subheader>
        收藏的产品
      </v-subheader>
      <v-list-item
          :key="item.title"
          v-for="(item, index) in productions"
          @click="$router.push('/production/'+item.pid)"
      >
        <v-list-item-avatar  size="70" rounded>
          <v-img :src="item.pictureList&&getImg(item.pictureList[0])"></v-img>
        </v-list-item-avatar>

        <v-list-item-content>
          <v-list-item-title>{{item.title}}</v-list-item-title>
          <v-list-item-subtitle>{{item.favouriteCount}}次收藏</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>

      <v-card-subtitle v-if="!(productions.length||loadingProductions)" class="text-center">还没有收藏的产品哦</v-card-subtitle>

      <load-more :loading="loadingProductions" v-if="hasMoreProductions" @onLoadMore="getFavouriteProductions"></load-more>
    </v-list>
    <v-list two-line>
      <v-divider></v-divider>
      <v-subheader>
        收藏的文章
      </v-subheader>
      <v-list-item
          :key="item.title"
          v-for="(item, index) in articles"
          @click="$router.push('/article/'+item.aid)"
      >
        <v-list-item-avatar size="70" rounded>
          <v-avatar color="secondary" rounded  size="70"><span class="white--text text-h5">{{ item.title }}</span>
          </v-avatar>
        </v-list-item-avatar>

        <v-list-item-content>
          <v-list-item-title>{{item.title}}</v-list-item-title>
          <v-list-item-subtitle>{{item.approveCount}}个点赞 {{item.favouriteCount}}次收藏</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
      <v-card-subtitle v-if="!(articles.length||loadingArticles)" class="text-center">还没有收藏的文章哦</v-card-subtitle>

      <load-more :loading="loadingArticles" v-if="hasMoreArticles" @onLoadMore="getFavouriteArticles"></load-more>
    </v-list>
  </v-container>
</template>

<script>
import {baseUrl, imgPrefixUrl} from "../myConfig";
import LoadMore from "./LoadMore";

export default {
  name: "Favourites",
  components: {LoadMore},
  props:['fromUid'],
  data: () => ({
    articles: [],
    productions:[],
    loadingProductions:false,
    loadingArticles:false,
    hasMoreProductions:true,
    hasMoreArticles:true,
    productionPage:{
      page:0,
      row:5
    },
    articlePage:{
      page:0,
      row:5
    }
  }),
  methods: {
    getFavouriteProductions(){
      this.loadingProductions = true
      let data = {
        fromUid:this.fromUid,
        type:'production',
        page:1,
        row:(this.productionPage.page+=1)*this.productionPage.row
      }
      this.$http.post('favourite/listFavourite', data).then(res => {
        this.productions = res.data || []
        this.loadingProductions = false
        this.hasMoreProductions = ! (res.total===this.productions.length)
      }).catch(res => {
        this.$emit("toast", res.msg)
        this.loadingArticles = false
      })
    },
    getFavouriteArticles(){
      this.loadingArticles = true
      let data = {
        fromUid:this.fromUid,
        type:'article',
        page:1,
        row:(this.articlePage.page+=1)*this.articlePage.row
      }
      this.$http.post('favourite/listFavourite', data).then(res => {
        this.articles = res.data || []
        this.loadingArticles = false
        this.hasMoreArticles = ! (res.total===this.articles.length)
      }).catch(res => {
        this.$emit("toast", res.msg)
        this.loadingArticles = false
      })
    },
    getImg(img){
      if (img){
        return baseUrl+imgPrefixUrl+img
      }else{
        return ''
      }
    }
  },
  created() {
    this.getFavouriteProductions()
    this.getFavouriteArticles()

  }
}
</script>

<style scoped>

</style>
